<template>
  <div>
    <home-header></home-header>
    <home-swiper :swiperListReal="swiperList"></home-swiper>
    <home-icons :iconListReal="iconList"></home-icons>
    <home-recommend :recommendListReal="recommendList"></home-recommend>
    <home-weekend :weekendListReal="weekendList"></home-weekend>
  </div>
</template>

<script>
import homeHeader from './components/header.vue'
import homeSwiper from './components/swiper.vue'
import homeIcons from './components/icons.vue'
import homeRecommend from './components/recommend.vue'
import homeWeekend from './components/weekend.vue'
import axios from 'axios'
export default {
  name: 'Home',
  components: {
    homeHeader,
    homeSwiper,
    homeIcons,
    homeRecommend,
    homeWeekend
  },
  data () {
    return { 
      swiperList: [],
      iconList: [],
      recommendList: [],
      weekendList: []
    }
  },
  methods: {
    getHomeInfo () {
      axios.get('/mock/index.json').then(this.getHomeInfoSucc)
    },
    getHomeInfoSucc (res) {
      res = res.data
      this.swiperList = res.data.swiperList
      this.iconList = res.data.iconList
      this.recommendList = res.data.recommendList
      this.weekendList = res.data.weekendList
    }
  },
  mounted () {
    this.getHomeInfo()
  }
}
</script>

<style>

</style>
